<template>
    <div ref="chart" style="width: 100%; height: 600px"></div>
</template>

<script setup lang='ts' name='SpaceStatus'>
    import { ref, onMounted } from "vue";
    import * as echarts from "echarts";
    import request from "@/requests/request";
    
    const chart = ref();
    onMounted(() => {
        initEchats();
    });
    function initEchats() {
        // 基于准备好的dom，初始化echarts实例
        const statusChart = echarts.init(chart.value);
        const statusData = new Array()
        request.post("/querySpaceStatus").then((res: any) => {
            const {data, message, resCode} = res.data
            console.log("/querySpaceStatus", data, resCode, message)
            if (!data || resCode !== 0) {
                console.log("/querySpaceStatus", "no spaceStatus record found")
                return
            }
            const {usedVolume, remainVolume} = data
            statusData.push({name: `已使用(${usedVolume}MB)`, value: usedVolume})
            statusData.push({name: `未使用(${remainVolume}MB)`, value: remainVolume})
            // 指定图表的配置项和数据
            const options = {
                title: {
                    text: '空间使用状态',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '<br/>{b} : {c}MB ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: [""]
                },
                series: [
                    {
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: statusData
                    }
                ]
            };
            options.legend.data = statusData.map((item: any)=> {
                return item.name
            }) 
            options.series = [
                {
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: statusData,
                }
            ]
            statusChart.setOption(options);
        }).catch((reason: any) => {
            console.log(reason)
        })
    }
</script>

<style scoped lang='scss'></style>